<template>
  <div class="home" >
      <div :class="['header header-fixed']" >
        <div class="row">
          <div class="row-Content">
              <img src="@/assets/ddtvvlogo.png"  alt="图片" class="img"/>
              <ul class="ul">
                <li>首页</li>
                <li>电影</li>
                <li>电视</li>
                <li>动漫</li>
                <li>综艺</li>
                <li>综艺</li>
                <li>更多</li>
              </ul>
            <div class="search">
              <search />
            </div>
            <div class="login">
              <a href="/login" title="登录">
                <el-icon><User /></el-icon>
                <span class="vam ml5">登录</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    <div class="nav">
      <Slider/>
    </div>
    <div class="content">
<!--      <span>我是主要内容</span>-->
      <Main/>
    </div>
  </div>
</template>

<script>
import Search from "../views/components/Search.vue";
import Slider from "../views/components/Slider.vue";
import Main from "../views/main/Main.vue"
export default {
  name: 'Home',
  components: {
    Search,
    Slider,
    Main
  },
  data(){
    return{
      isHeader:true,//初始值
    }
  },
  mounted() {
    window.addEventListener('scroll',this.handleScroll,true)
  },
  methods: {
    getCookie(name) {
      let ret, m;
      if (typeof name === 'string' && name !== '') {
        if ((m = String(document.cookie).match(
            new RegExp('(?:^| )' + name + '(?:(?:=([^;]*))|;|$)')))) {
          ret = m[1] ? decodeURIComponent(m[1]) : ''
        }
      }
      return ret
    },
    Show(){
      this.show=!this.show;
    },
    handleScroll(){
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      if(scrollTop >150){
        this.isHeader = false
      }else if(scrollTop < 100){
        this.isHeader = true
      }
    }
  },
  created() {
    debugger
    if(!this.getCookie("user")){
      window.location.href = window.location.origin + window.location.pathname + "login";
    }
  }
}
</script>

<style scoped lang="less">
.home{
  width: 100%;
  height: 100%;
  .header{
    width: 100%;
    min-height: 60px;
    //background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
    background: black;
    margin: 0;
    text-align: center;
    span{
      color: white;
    }
    .row{
      width: 90%;
      margin: 0 auto;
      height: 60px;
      .row-Content{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .ul{
          display: flex;
          list-style-type:none;
          color: #fff;
          li{
            margin: 0 10px 0 0;
          }
        }
        .img{
          width: 120px;
        }
        .search{
          //margin: 0 0 0 72px;
          width: 22%;
        }
        .login{
          width: 100px;
          a{
            color: white;
            text-decoration: none;
          }
          a:hover{
            span{
              color: #43C9D2;
            }
          }
        }
      }
    }
  }

  .header-fixed{
    position: fixed;
    top: 0;
    z-index: 999;
    transition: all .3s ease-in;
  }
  .nav{
    position:relative ;
    width: 100%;
    //height: 300px;
    background: #a5a3e5;
    margin:60px 0 0 0;
    z-index: 1;
  }
  .content{
    width: 100%;
    height: 600px;
    //background: #6de870;
    margin: 0;
  }
}
</style>
